<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Love between Us</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./css/main.css">
</head>

<body>
    <audio src="./music.mp3" autoplay="true" loop="loop"></audio>
    <div id="back">
        <div class="mask"></div>
        <!-- 设置展示的图片，github pages不能有后台程序只能一条一条手动添加了 囧 -->
        <div id="carousel"  class="carousel slide carousel-fade carousel-position">
            <div class="carousel-inner" style="width: 100%;height: 100%;" id="background">
                <div class="item active" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background:url(./img/1.PNG);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/2.JPG) ;background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/3.png) ;background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/4.JPG) ;background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/5.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/6.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/7.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/8.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/9.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/10.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/11.png);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/12.png);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/13.png);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/14.png);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/15.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/16.png);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/17.png);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/18.png);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/19.png);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/20.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/21.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/22.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/23.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/24.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/25.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/26.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/27.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/28.png);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/29.png);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/30.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/31.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/32.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/end.png);background-size: cover;"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal show" style="top:24%;">
        <div class="modal-dialog" style="opacity: .9">
            <div class="modal-content" style="opacity:.85">
                <div class="modal-header">
                    <h1 class="text-center" style="color: #A94442;font-family: 'JournalRegular', Arial, sans-serif;font-size: 7rem;">the times we together</h1>
                    <p class="text-center small-title">Johnny & Dawn</p>
                    <p class="text-center small-title">LOVING ON THE WAY</p>
                </div>
                <div class="modal-body text-center" style="line-height: 1.5rem;font-family: 'JournalRegular', Arial, sans-serif;font-size: 3rem;">
                    <p>
                        <span id="day" class="time-font"></span><span style="color:#A94442">/&nbsp;</span><span id="hour" class="time-font"></span><span style="color:#A94442">/&nbsp;</span><span id="minute" class="time-font"></span><span style="color:#A94442">/&nbsp;</span><span id="second" class="time-font"></span>
                    </p>
                    <p>
                        days/hours/min/sec
                    </p>
                    <p class="text-center" style="color:#A94442;font-size: 17px" id="say"></p>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./js/jquery-1.12.2.min.js"></script>
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./js/count-time.js"></script>
    <script>
    $(function() {
        //设置起始日期
        countTime('2016/01/30 23:45', 'day', 'hour', 'minute', 'second');
        var days = $('#day').text();

        // 设置标题
        if (parseInt(days / 365) != 0) {
            $(document).attr("title", "在一起" + parseInt(days / 365) + "年,感谢相伴。");
        } else if (parseInt(days / 30) != 0) {
            $(document).attr("title", "在一起" + parseInt(days / 30) + "个月,感谢相伴。");
        } else
            $(document).attr("title", "在一起" + days + "天,感谢相伴。");

        //设置每一张图片对应的文字
        var says = new Array(
            "一路相伴,感谢有你",
            "走过很多路，拍过很多照片，却只爱了一个人",
            "福州,乐咖乐。 爱看你吃饭的样子",
            "惊慌失措可爱的小表情",
            "福州，农林大学。 一起去看花，牵着手走过花海",
            "你是我这一生最美的桃花味麦旋风",
            "宁德，太姥山。 一早却比一世还长情",
            "丢在许愿池的那个愿望一定实现了吧",
            "福州，西湖公园。你在身边，你就是我最美的西湖",
            "福州，旋转寿司。食力战将非我们莫属",
            "福州，福大外国语学院。到此一游",
            "福州，第五大道。爱过这里的披萨，腻了全世界的披萨",
            "福州，福州大学图书馆。快毕业了才发现学校那么美，如你一般。",
            "福州，西禅寺。求了几辈子的佛，我们终于在一起了",
            "福州，福大学生街。一起看到了彩虹，传说，那样会很幸福",
            "宁德，太姥山。车上的照片也能拍得很美啊",
            "福州，福大金阁寺。你告诉我那是金阁寺所以我至今不知道它真正叫什么",
            "福州，EO。你说要减肥，所以我们走进了万科广场的EO",
            "福州，中亭街。草莓派很甜，我却能大块吃下去，厉害吧",
            "福州，爱琴海。躲在我后面，我保护你",
            "福州，爱琴海。我也终于有不进衣服店的理由了！",
            "福州，爱琴海。和我一样大的熊",
            "福州，爱琴海。再见了，爱琴海给我们带来快乐的地方",
            "福州，博士后广场。四年，我们学校的乐园",
            "福州，豆花新语。终于，我们毕业了，还好我们依然在一起",
            "厦门，前埔。奶茶与你，很搭哦",
            "厦门，前埔。躲在墙角偷偷拍照，嘿嘿",
            "厦门，火车站。发现新天地了",
            "厦门，五缘湾。五缘湾的夕阳，好美",
            "惠安，无名街道。好想带你走遍我活了十几年的地方",
            "厦门，软件园。原来七夕可以这么简单，一幅画，一句情话，幸福",
            "厦门，软件园。我也开始喜欢上画画了，画很多很多的你",
            "时间不停，爱你不止，携子之手，白头偕老"
        );


        var start = function() {
            var index = 0;
            var rate = 6000;
            $('#say').text(says[(index++) % says.length]);
         	var _play = function () {
         		$('#say').hide();
                $('#say').text(says[(index++) % says.length]);
                $('#say').fadeToggle();
                $('#carousel').carousel('next');
         	};
            setInterval(_play, rate);
        }();

    });
    </script>
</body>

</html>
